<template>

  <div id="Demo">
    <div class="permissionFrameClass">
      <div class="permissionOptionClass">
        <el-form label-width="100px">
            <el-checkbox-group  v-model="checkedModules" @change="handleChange()">
              <el-checkbox v-for="data in modules" :label="data.id" :key="data.id">{{data.moduleName}}
              </el-checkbox>
            </el-checkbox-group>
        </el-form>
      </div>
      <div class="remarkTitleClass">
        <span>操作原因 <span class="red-dot">*</span></span>
      </div>
      <div class="remarkContentClass">
        <el-input type="textarea" v-model="remark" :value="remark" maxlength="25" :rows="4" placeholder="填写操作原因"></el-input>
      </div>
      <el-row class="btnFrameClass">
        <el-button class="singleBtnClass" type="primary" @click="close" plain>关闭</el-button>
        <el-button class="singleBtnClass" type="primary" @click="submmit">提交</el-button>
      </el-row>
    </div>
  </div>

</template>
<script type="text/ecmascript-6">
  import PcDialog from 'components/dialog';
  export default{
    props: {
      user: {
        type: Object,
        require: true
      }
    },
    components: {
      PcDialog
    },
    data() {
      return {
        checkedModules: [],      // 随意修改后的checked项（即要传到后台的变更数据）
        checkeModule: [],        // 修改前的checked项
        modules: [],              // 所有数据
        remark: '',
        userInfo: this.user
      };
    },
    created() {
      this.initData();
    },
    computed: {
    },
    methods: {
      submmit() {
        // 检查修改前后的权限是否相同
        if (this.checkeModule.sort().toString() === this.checkedModules.sort().toString()) {
          this.errorTip('权限没有发生变化！');
          return;
        }
        // 检查操作原因是否为空
        if (this.remark.length === 0) {
          this.errorTip('请填写操作原因！');
          return;
        }
        var that = this;
        // 调用后端接口
        this.ajax({
          type: 'POST',
          url: '/ibs/web/module/manageAcUserModule',
          data: {userIdList: [that.userInfo.userId], moduleIdList: that.checkedModules, reasonDesc: that.remark},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.successTip('更新成功', 2000);
              that.$emit('sure');
            } else {
              this.errorTip(res.message);
            }
          }
        });
        this.$emit('sure');
      },
      close() {
        this.$emit('close');
      },
      initData() {
        let that = this;
        this.ajax({
          url: '/ibs/web/module/queryListModule',
          type: 'POST',
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            // 初始化权限基础信息
            that.modules = [];
            if (res.result !== null) {
              res.result.forEach((item, index) => {
                let option = {id: null, moduleName: ''};
                option.id = item.id;
                option.moduleName = item.moduleName;
                that.modules.push(option);
              });
            }
            // 初始化默认选中状态
            if (that.userInfo.userModuleList !== null) {
              that.checkeModule = [];
              that.checkedModules = [];
              that.userInfo.userModuleList.forEach((item, index) => {
                that.checkeModule.push(item.moduleId);
                that.checkedModules.push(item.moduleId);
              });
            }
          }
        });
      },
      handleChange () {
        console.log(this.checkedModules);
      }
    }
  };
</script>
<style>
  .permissionFrameClass
  {
    width: 100%;
    height: 280px;
    background-color: white;
    /*border: 1px solid #e4e4e4;*/
  }
  .permissionOptionClass
  {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 30px;
    color: #333333;
  }
  .remarkTitleClass
  {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: #333333;
  }
  .remarkContentClass
  {
    margin-top: 20px;
    margin-left: 20px;
    height: 60px;
    width: 94%;
    background-color: white;
  }
  .permissionFrameClass .btnFrameClass
  {
    margin-top: 80px;
    text-align: center;
    margin-left:0!important;
  }
  .singleBtnClass
  {
    width: 140px;
    height: 40px;
  }
  .red-dot{
    color:#ff6c2b;
    font-size:21px;
    position:relative;
    top:8px;
  }

</style>
